define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var VSHADER_SOURCE = require('text!../shader/vertex.glsl')
  var FSHADER_SOURCE = require('text!../shader/fragment.glsl')

  var __ = require('hy5b/gl/index')
  var util = require('hy5b/math/index')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);


    var canvas = document.getElementById('canvas');

    var gl = getWebGLContext(canvas);

    if (!gl) {
      p("Your browser don't support webgl!!");
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
      p("essl inited failed!!");
      p.info("Your browser don't support webgl!!");
    }

    var initVertexBuffers = function() {
      var vertexs = new Float32Array([0.0, 0.3, -0.3, -0.3, 0.3, -0.3]);

      var n = 3;

      var vertexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertexs, gl.STATIC_DRAW);

      var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position);

      return n;
    }

    var initFragColor = function() {
      var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
      var g_colors = [1.0, 0.2, 0.4, 1.0];
      gl.uniform4f(u_FragColor, g_colors[0], g_colors[1], g_colors[2], g_colors[3]);
    }

    var initTransiton = function() {
      var u_Transition = gl.getUniformLocation(gl.program, 'u_Transition');
      var Tx = 0.5,
        Ty = 0.5,
        Tz = 0;
      gl.uniform4f(u_Transition, Tx, Ty, Tz, 0.0);
    }

    var angle = 60.0;

    var ANGLE_STEP = 45.0;
    var currentAngle = 0.0;

    var last_time = Date.now();

    var animate = function(angle) {
      var now = Date.now();
      var duration = now - last_time;
      last_time = now;
      currentAngle = currentAngle + ANGLE_STEP * duration / 1000;
      return currentAngle %= 360;
    }
    var step = function() {
      currentAngle = animate(currentAngle);
      draw(gl, currentAngle);
      requestAnimationFrame(step);
    }


    setUniform(gl, 'u_CosB', util.cos(angle));
    setUniform(gl, 'u_SinB', util.sin(angle));
    var cosB = util.cos(angle);
    var sinB = util.sin(angle);

    //旋转
    // var xformMatrix = new Float32Array([
    //     cosB, sinB, 0.0, 0.0,
    //     -sinB, cosB, 0.0, 0.0,
    //     0.0, 0.0, 1.0, 0.0,
    //     0.0, 0.0, 0.0, 1.0
    // ]);


    var Tx = 0.5,
      Ty = 0.5,
      Tz = 0;
    //平移
    // var xformMatrix = new Float32Array([
    //   1.0, 0.0, 0.0, 0.0,
    //   0.0, 1.0, 0.0, 0.0,
    //   0.0, 0.0, 1.0, 0.0,
    //   Tx, Ty, Tz, 1.0
    // ]);


    var Sx = 1.0,
      Sy = 1.5,
      Sz = 1.0;
    //缩放
    var xformMatrix = new Float32Array([
      Sx, 0.0, 0.0, 0.0,
      0.0, Sy, 0.0, 0.0,
      0.0, 0.0, Sz, 0.0,
      0.0, 0.0, 0.0, 1.0
    ]);

    var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
    if (0) {
      gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    } else {
      var xformMatrix = new Matrix4();
      xformMatrix.setTranslate(Tx, 0, 0);
      xformMatrix.rotate(angle, 0, 0, 1);
      gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);
    }

    function draw(gl, angle) {
      clearGl(gl);
      var xformMatrix = new Matrix4();
      xformMatrix.setRotate(angle, 0, 0, 1);
      gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);
      gl.drawArrays(gl.TRIANGLE_FAN, 0, n);
    }
    
    var n = initVertexBuffers();
    initFragColor();
    initTransiton();
    
    step();
  }

  return main;
})
